<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>引入bootstrap</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <!--<div class="row">-->
            <!--<div class="col-md-4 col-sm-4">1</div>-->
            <!--<div class="col-md-4 col-sm-4">2</div>-->
            <!--<div class="col-md-4 col-sm-4">3</div>-->
        <!--</div>-->
        <div class="row">
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3
                Resize your viewport or check it out on your phone for an example.</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

            <!-- Add the extra clearfix for only the required viewport -->
            <div class="clearfix visible-xs-block"></div>

            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-9">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-12">.col-md-3 .col-md-pull-9</div>
        </div>
        <div class="row">
            <div class="col-md-9"><span class="h1">我们都是<span class="small">中国人</span></span></div>
            <div class="col-md-3 col-md-pull-12"><h1>h1. Bootstrap heading <small>Secondary text</small></h1></div>
        </div>
    </div>
    <div class="container">
    <table class="table table-bordered table-striped table-hover table-responsive">
        <tr><td>das</td></tr>
        <tr><td>das</td></tr>
        <tr><td>das</td></tr>
        <tr><td>das</td></tr>
        <tr class="active"><td>111</td></tr>
        <tr class="success"><td>111</td></tr>
        <tr class="warning"><td>111</td></tr>
        <tr class="danger"><td>111</td></tr>
        <tr class="info"><td>111</td></tr>
        <tr class="info"><td>111</td></tr>
        <tr>
            <td class="active">...</td>
            <td class="success">...</td>
            <td class="danger">...</td>
            <td class="info">...</td>
        </tr>
        <tr>
            <td >...</td>
            <td >...</td>
            <td >...</td>
            <td >...</td>
        </tr>
    </table>

        <form>
            <div class="form-group" style="width: 200px;">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <form class="form-inline" style="width: 196px;">
            <div class="form-group">
                <label class="sr-only" for="exampleInputEmail3">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
            </div>
            <div class="form-group">
                <label class="sr-only" for="exampleInputPassword3">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
            <button type="submit" class="btn btn-default">Sign in</button>
        </form>

        <form class="form-horizontal">
            <div class="form-group form-group-sm">
                <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
                </div>
            </div>
        </form>

        <button type="button" class="btn btn-primary btn-lg active" disabled >Primary button</button>
        <button type="button" class="btn btn-default btn-lg active" disabled >Button</button>

        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

    </div>
<script src="../jquery/jquery-3.3.1.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>